<script setup>
import {computed, ref, shallowRef} from "vue";
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
import getConf from "@/views/news-upload/conf";
import {getUsers} from "@/api/user";
import {toast} from "@/hook/toast";
import {fkType, fkAdd, fkEdit} from "@/api/fk";


const visible = ref(false)
const isEdit = ref(false)
const emits = defineEmits(['success'])

function getFormData() {
  return {
    jishu_yichang_type: '',
    date: '',
    jishu_user: '',
    content: '',
    id: '',
  }
}

const formData = ref(getFormData())
const rules = computed(() => ({
  jishu_yichang_type: [
    {
      required: true,
      message: '请选择异常类型'
    }
  ],
  date: [
    {
      required: true,
      message: '请选择日期'
    }
  ],
  jishu_user: [
    {
      required: true,
      message: '请选择对应人员'
    }
  ],
  content: [
    {
      required: true,
      message: '请输入内容'
    }
  ]
}))
const formRef = ref(null)
const typeList = ref([])
const userList = ref([])
const editorRef = shallowRef()

const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: getConf(
      (src) => {

      },
  ),
}

function handleCreated(editor) {
  editorRef.value = editor
}

const toolbarConfig = {}

function initData() {
  initType()
  initUser()
}

async function initType() {
  const resp = await fkType()
  if (!resp.data) resp.data = []
  typeList.value = resp.data.map(item => {
    const {id, name} = item
    return {value: id, label: name}
  })
}

async function initUser() {
  const resp = await getUsers()
  if (!resp.data) resp.data = []
  const {code, data, msg} = resp
  if (code !== 1) toast({title: msg, type: 'error'})
  userList.value = data.map(item => {
    const {id, nickname} = item
    return {value: id, label: nickname}
  })
}

defineExpose({
  open(data) {
    initData()
    const _edit = !!data
    isEdit.value = _edit
    visible.value = true
    if (!_edit) return
    const {jishu_user, date, content, id, jishu_yichang_type} = data
    formData.value = {
      id,
      date,
      jishu_user,
      jishu_yichang_type,
      content:decodeURIComponent(content)
    }
  }
})

function resetForm() {
  isEdit.value = false
  formRef.value?.resetFields()
  formData.value = getFormData()
}

function cancelHandle() {
  visible.value = false
}

async function handle(fn, data) {
  const resp = await fn(data)
  const {code, msg} = resp
  toast({title: msg, type: code === 1 ? 'success' : 'error'})
  if (code !== 1) return
  emits('success')
  cancelHandle()
}

function confirmHandle() {
  formRef.value?.validate(async flag => {
    if (!flag) return
    const {jishu_yichang_type, jishu_user, date, content} = formData.value
    const payload = {jishu_yichang_type, jishu_user, date, content:encodeURIComponent(content)}
    const edit = isEdit.value
    if (edit) payload.id = formData.value.id
    await handle(isEdit.value ? fkEdit : fkAdd, payload)
  })
}
</script>

<template>
  <el-drawer
      v-model="visible"
      :title="isEdit ? '编辑':'添加'"
      size="680px"
      @closed="resetForm"
  >
    <el-form
        ref="formRef"
        :model="formData"
        label-position="left"
        label-width="90px"
        :rules="rules"
    >
      <el-form-item label="异常类型" prop="jishu_yichang_type">
        <el-select placeholder="请选择异常类型"
                   v-model="formData.jishu_yichang_type"
                   style="width: 200px;"
        >
          <el-option v-for="(item,index) in typeList"
                     :key="index"
                     :label="item.label"
                     :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="日期" prop="date">
        <el-date-picker style="width: 200px;" value-format="YYYY-MM-DD" placeholder="请选择日期"
                        v-model="formData.date"/>
      </el-form-item>
      <el-form-item label="对应人员" prop="jishu_user">
        <el-select v-model="formData.jishu_user"
                   placeholder="请选择对应人员"
                   style="width: 200px;"
        >
          <el-option v-for="(item,index) in userList" :key="index" :value="item.value" :label="item.label"/>
        </el-select>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <div style="border: 1px solid #ccc;width: 100%" v-if="visible">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"
                   :defaultConfig="toolbarConfig" mode="default"/>
          <Editor style="height: 450px; overflow-y: hidden;" v-model="formData.content"
                  :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated"/>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-space>
        <el-button type="info" @click="cancelHandle">取消</el-button>
        <el-button type="primary" @click="confirmHandle">确认{{ isEdit ? '修改' : '添加' }}</el-button>
      </el-space>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">

</style>
